<template>
  <div class="Course-main">
    <div class="title-name">
      <v-icon color="#fff"
              style="vertical-align:middle; margin-right:8px">menu</v-icon>
      <span style="font-size:20px;line-hight:24px;vertical-align:middle;">太理拾课</span>
    </div>
    <header>

      <div class="title-week">
        <div class="week-list"
             v-for="(item,index) in week"
             :key="index">
          <div class="week-btn"
               @click="selectWeek(index)">
            <p class="list-num">
              第
              <br />
              {{index+1}}
              <br />周
            </p>
          </div>
          <p class="week-status"
             v-if="item == 1">本周</p>
          <p class="week-status"
             v-if="item == 0">_</p>
        </div>
      </div>
    </header>
    <div class="main-course">
      <div class="main-list-num">
        <div class="course-index"
             head></div>
        <div class="main-week"
             head
             v-for="i in weekName"
             :key="i">
          <p class="list-num"
             black>{{i}}</p>
        </div>
      </div>
      <div class="course-index">
        <div class="course-index-num"
             v-for="i in 10"
             :key="i">
          <p class="list-num"
             black
             course>{{i}}</p>
        </div>
      </div>
      <div class="main-week"
           v-for="(item1,index1) in classesData"
           :key="index1">
        <div class="course"
             v-for="(item2,index2) in item1"
             :isCourse="item2.isCourse"
             :height="item2.len"
             :key="index2">
          <div class="course-content">
            <span class="course-title">{{ f(index1+1,item2.index,0)}}</span>
            <span class="course-title">{{f(index1+1,item2.index,2)}}</span>
          </div>
        </div>
        <!-- <div class="course" height="6"></div> -->
      </div>
    </div>
    <div class="text-center ma-2">
      <v-snackbar v-model="snackbar">
        {{ text }}
        <v-btn color="pink"
               text
               @click="snackbar = false">
          Close
        </v-btn>
      </v-snackbar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: 'Course',
      shift: 'movies',
      text: '未登录,暂无数据',
      islogin: false,
      snackbar: false,

      weekNum: '',
      weekName: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      week: [],

      classesData: [],
      courseMsg: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 数据初始化
    init () {
      this.weekNum = ''
      if (this.getToken()) {
        this.courseReq()
      }
    },
    selectWeek (index) {
      this.courseReq(index + 1)
    },
    // 请求数据
    courseReq (weekNum) {
      this.classesData = []
      this.courseMsg = []
      var localToken = this.getToken()
      this.token = localToken
      var data = {}
      data.week = weekNum // eslint-disable-line no-undef
      data.token = localToken
      this.$axios({
        method: 'POST',
        url: '/kcb',
        data,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json'
        }
      })
        .then((response) => {
          if (response.data.state == 200) { // eslint-disable-line eqeqeq
            // 获取周数据
            if (response.data.message.week != null) {
              var week = response.data.message.week
              this.week = week
            }

            var msg = response.data.message

            var courseMsg = []
            for (var i = 1; i < 8; i++) {
              // 每天的数据
              courseMsg[i] = {}
              var arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
              if (msg[i] == null) {
                continue
              }
              for (var key in msg[i]) {
                // 每节课的数据
                var time = key.split('-')
                arr[time[0] - 1] = parseInt(key) + 1
                arr[time[1] - 1] = parseInt(key) + 1
                courseMsg[i][parseInt(key) + 1] = this.tolist(msg[i][key])
              }
              this.dataCompute(arr)
            }
            this.courseMsg = courseMsg
          } else {
            this.snackbar = true
            this.text = response.data.message
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    dataCompute (arr) {
      var dayInfo = []
      var start = 0
      for (var i = 0; i <= arr.length; i++) {
        if (arr[start] != arr[i]) { // eslint-disable-line eqeqeq
          var classInfo = {}
          classInfo.len = i - start
          classInfo.isCourse = arr[start] != 0 // eslint-disable-line eqeqeq
          classInfo.index = arr[start]
          dayInfo.push(classInfo)
          start = i
        }
      }
      this.classesData.push(dayInfo)
    },
    tolist (obj) {
      var list = []
      for (var item in obj) {
        list.push(obj[item])
      }
      return list
    },
    f (day, index, num) {
      if (this.courseMsg[day][index] != null) {
        var list = this.courseMsg[day][index]
        return list[num]
      } else return null
    },
    getToken () {
      var storage = window.localStorage
      var localToken = storage.getItem('token')
      if (localToken == null) {
        console.log('未登陆')
        this.text = '未登陆'
        return false
      } else {
        return localToken
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0px;
}
.Course-main {
  background: #2c2933;
  height: 900px;
}
header {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
}
.title-name {
  color: white;
  width: 100%;
  padding: 20px 20px 0px 20px;
  box-sizing: border-box;
}
.title-week {
  width: auto;
  box-sizing: border-box;
  height: 90px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
.title-week::-webkit-scrollbar {
  display: none;
}
.week-list {
  width: 30px;
  padding: 3px;
  margin: 2px 12px 2px 0px;
  text-align: center;
  display: inline-block;
}
.week-btn {
  padding: 2px;
  margin: auto;
  width: 28px;
  height: 60px;
  text-align: center;
  border-radius: 12px;
  border: solid 1px rgb(255, 255, 255);
}
.week-btn:hover {
  background: #5c5c5c;
}
.list-num {
  line-height: 18px;
  text-align: center;
  font-size: 10px;
  color: #fff;
}
.list-num[black] {
  color: #2a2a2a;
}
.list-num[course] {
  line-height: 60px;
}
.week-status {
  color: #fff;
  font-size: 12px;
  margin-top: 3px;
  padding: 2px;
  text-align: center;
}
.main-course {
  height: auto;
  background: #fff;
  border-radius: 12px;
  padding: 0px 0px 0px 0px;
  margin-bottom: 40px;
  overflow: hidden;
}
.main-list-num {
  width: 100%;
  padding: 0px 0px 0px 0px;
}
.main-week {
  text-align: center;
  width: 13.5%;
  height: 630px;
  float: left;
  padding: 12px 0px;
}
.course-index {
  width: 5.5%;
  height: 600px;
  float: left;
  padding-bottom: 5px;
}
.main-week[head] {
  height: 20px;
}
.course-index[head] {
  height: 20px;
}
.course {
  height: 120px;
  margin: 0.4px;
  box-sizing: border-box;
}
.course[isCourse='true'] {
  background-color: #2c2933;
  border-radius: 12px;
}
.course[height='1'] {
  height: 60px;
}
.course[height='2'] {
  height: 120px;
}
.course[height='3'] {
  height: 180px;
}
.course[height='4'] {
  height: 240px;
}
.course[height='5'] {
  height: 300px;
}
.course[height='6'] {
  height: 360px;
}
.course[height='10'] {
  height: 600px;
}
.course-index-num {
  height: 60px;
}
.course-content {
  padding: 1px;
  color: #fff;
  font-size: 12px;
}
.course-title {
  font-size: 12px;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 90%;
}
</style>
